<template>
  <div class="cs-page-container">
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >
        <span>活动配置</span>
      </div>
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="activity"
      >
        <el-form-item
          label="活动标题："
          prop="actName"
        >
          <el-col :span="5">
            <el-input v-model.trim="activity.actName" placeholder="请输入活动标题…" />
          </el-col>
        </el-form-item>
        <el-form-item
          label="活动图标："
          prop="actIcon"
        >
          <Upload
            :img="activity.actIcon"
            :is-size="true"
            @change="imageChange"
          />
        </el-form-item>
        <el-form-item
          label="活动跳转链接："
          prop="cmd"
        >
          <el-input v-model.trim="activity.cmd" placeholder="请输入活动跳转链接…" />
        </el-form-item>
        <el-form-item
          label="活动显示时间："
        >
          <el-date-picker
            v-model="daterangeValue"
            type="datetimerange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="截至时间"
            value-format="yyyy/MM/dd HH:mm:ss"
            format="yyyy/MM/dd HH:mm:ss"
            :default-value="daterangeValue"
            :default-time="['00:00:00', '23:59:59']"
            @change="datetimeChanged"
          />
        </el-form-item>
        <el-form-item
          label="开关"
          prop="actSwitch"
        >
          <el-switch v-model="activity.actSwitch" />
        </el-form-item>
      </el-form>
      <div>
        <el-button
          type="primary"
          @click="createData"
        >确认</el-button>
        <el-button @click="doSearch">取消</el-button>
      </div>
    </el-card>
    <ImageViewer
      :visible.sync="imageViewerVisible"
      :url="imageUrl"
    />
  </div>
</template>

<script>
  import {
    xhrActivityGet,
    xhrActivitySet
  } from '@/api/customSetting'
  import Upload from '@/components/Upload/SingleImage'
  import ImageViewer from '@/components/ImageViewer'

  export default {
    name: 'ActivitySetting',
    components: { Upload, ImageViewer },
    filters: {},
    data() {
      return {
        imageViewerVisible: false,
        imageUrl: '',
        list: null,
        listLoading: true,
        listQuery: {},
        daterangeValue: [],
        activity: {
          actName: null,
          actIcon: null,
          actSwitch: 0,
          startTime: null,
          endTime: null,
          cmd: null
        },
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '新建'
        },
        total: 0,
        rules: {
          actName: [{ required: true, message: '必选项', trigger: 'blur' }],
          actIcon: [{ required: true, message: '必选项', trigger: 'blur' }],
          cmd: [{ required: true, message: '必选项', trigger: 'blur' }]
        }
      }
    },
    created() {
      this.doSearch()
    },
    methods: {
      doSearch() {
        this.listLoading = true

        xhrActivityGet().then(res => {
          this.activity.actIcon = res.data.actIcon
          this.activity.actName = res.data.actName
          this.activity.actSwitch = res.data.actSwitch === 1
          this.activity.startTime = res.data.startTime
          this.activity.endTime = res.data.endTime
          this.activity.cmd = res.data.cmd
          if (this.daterangeValue.length > 0) {
            this.daterangeValue.splice(0, this.formatDate(res.data.startTime))
            this.daterangeValue.splice(1, this.formatDate(res.data.endTime))
          } else {
          this.daterangeValue.push(this.formatDate(res.data.startTime))
          this.daterangeValue.push(this.formatDate(res.data.endTime))
          }
          this.listLoading = false
        })
      },
      formatDate(value) {
        const date = new Date(value);
        const y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '/' + MM + '/' + d + ' ' + h + ':' + m + ':' + s;
      },
      datetimeChanged() {
        if (this.daterangeValue) {
          if (this.daterangeValue[0]) {
            const startTime = this.daterangeValue[0];
            this.activity.startTime = /\d{2}:\d{2}$/g.test(startTime) ? new Date(startTime).getTime() : new Date(startTime + ' 00:00:00').getTime()
          }
          if (this.daterangeValue[1]) {
            const endTime = this.daterangeValue[1];
            this.activity.endTime = /\d{2}:\d{2}$/g.test(endTime) ? new Date(endTime).getTime() : new Date(endTime + ' 23:59:59').getTime()
          }
        }
      },
      showImage(url) {
        this.imageViewerVisible = true
        this.imageUrl = url
      },
      imageChange(fileList, type) {
        if (type === 'upload') {
          const size = fileList[0].size
          if (size[0] / size[1] === 198 / 198) {
            this.activity = Object.assign(this.activity, { actIcon: fileList[0].url })
          } else {
            this.activity = Object.assign(this.activity, { actIcon: '' })
            this.$message({
              message: '图片的比例不正确',
              type: 'fail'
            })
          }
        } else if (type === 'remove') {
          this.activity = Object.assign(this.activity, { cover: null })
        }
      },
      resetTemp() {
        this.activity = {
          actName: null,
          actIcon: null,
          actSwitch: false,
          startTime: null,
          endTime: null,
          cmd: null
        }
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
        this.activity.actSwitch = this.activity.actSwitch ? 1 : 0
        this.$refs['dataForm'].validate(valid => {
          valid &&
          xhrActivitySet(this.activity).then(() => {
            this.doSearch()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
      handleUpdate(row) {
        this.activity = Object.assign({}, row)
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .img-wrap {
    width: 100px;
    height: 100px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
</style>

